<template>
  <v-dialog
    v-model="visible"
    width="380"
  >
    <v-card title="设置">
      <v-card-text>
        <div>
          <div class="flex-sc">
            <div class="text-sm text-gray-600 mr-1 min-w-16">自动播放</div>
            <v-switch
              v-model="settingsStore.autoPlay"
              color="primary"
              hide-details
            ></v-switch>
            
          </div>
          <div class="flex-sc">
            <div class="text-sm text-gray-600 mr-1 min-w-16">音量</div>
            <v-slider
              v-model="settingsStore.volume"
              :min="0"
              :max="1"
              :step="0.1"
              thumb-label
              hide-details
            ></v-slider>
          </div>

        </div>
      </v-card-text>
      <v-card-actions>
        <v-btn color="primary" block @click="visible=false">确定</v-btn>
      </v-card-actions>
    </v-card>
  </v-dialog>
</template>

<script lang="ts" setup>
import {useVModel} from '@/hooks/useVModel';
import { useSettingsStore } from '@/stores/settings';

const props=defineProps<{
  modelValue:boolean;
}>()
const emit=defineEmits<{
  (e: 'update:modelValue'): void;
  (e: 'confirm'):void;
}>()

const settingsStore=useSettingsStore();
const visible=useVModel(props,'modelValue',emit);
</script>

<style scoped>

</style>